<!doctype html>
<html>
<head>
	<title>Adding/Removing Items</title>
	<script src="../../../codebase/webix.js" type="text/javascript"></script>
	<link rel="STYLESHEET" type="text/css" href="../../../codebase/webix.css">
    <script src="../../common/testdata.js"></script>
    <link rel="STYLESHEET" type="text/css" href="../02_templates/dataview_styles.css">
<body>

	<div id="data" style="width:545px;height:270px;margin:20px"></div>

    <form style="margin-left:20px;width:200px">
		Title <input type="text" id="title" value="New movie"><br>
		Year <input type="text" id="year" value="2012"><br>
		<input type="button" value="Add &rarr;" onclick='addData()'>
		<hr>
		<input type="button" value="Remove selected &rarr;" onclick='removeData()'>
		<input type="button" value="Remove all items" onclick='$$("data").clearAll()'>
	</form>
    
	<script>
        webix.ui({
            id:"data",
			view:"dataview",
			container:"data",
            select:1,
            css: "movies",
            type:{
                width: 261,
                height: 90,
                template:"<div class='overall'><div class='title'>#title#</div><div class='year'>#year# year</div> </div>"
            },
            data:big_film_set
		});
        function addData() {
			$$("data").add({
				title: document.getElementById("title").value,
				year: document.getElementById("year").value
			},0)
		}
		function removeData(){
            if(!$$("data").getSelectedId()){
                webix.message("No item is selected!");
                return;
            }
			$$("data").remove($$("data").getSelectedId());
		}
	</script>

</body>
</html>

